<template>
  <div class="home">
    <Header></Header>
       <el-container class="content">     
        <Menu></Menu>
         <el-container>
          <el-main>
            <Breadcruma></Breadcruma>
            <div class="con">
             <router-view></router-view>
            </div>    
          </el-main>
          <el-footer><Footer></Footer></el-footer>
        </el-container>
      </el-container>
  </div>
</template>

<script>
import Header from './comment/Header.vue'
import Menu from './comment/Menu.vue'
import Footer from './comment/Footer.vue'
import Breadcruma from './comment/Breadcruma.vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  components:{
    Header,
    Menu,
    Footer,
    Breadcruma
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.home{
  width: 100%;
  height: 100%;
 .content{
  width: 100%;
  position: absolute;
  top: 100px;
  bottom: 0;
  .con{
    margin: 20px 0;
  }
}
}
</style>
